<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/home/shopping.css" />
	</head>

	<body>
		<div id="shopping" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<h1 class="mui-title">购物车</h1>
				<span class="mui-pull-right" v-text="edit?'完成':'编辑'" @tap="editSwith()" v-show="shopData.length>0">编辑</span>
			</header>
			<div class="mui-content" :style="{'padding-bottom' : shopData.length <= 0 ? 0:'44px'}">
				<div>
					<div class="shop_list" v-for="shopData in shopData">
						<div class="store">
							<!--编辑选中-->
							<div class="store_check" @tap.stop="shopDataEditCheck(shopData)" :class="{'check':shopData.edit==1}" v-if='edit'></div>
							<!--选中-->
							<div class="store_check" @tap.stop="shopDataCheck(shopData)" :class="{'check':shopData.checkSts==1}" v-else></div>
							<div class="store_name" @tap.stop="shopDataEditCheck(shopData)" v-if='edit'>{{shopData.shopName}}</div>
							<div class="store_name" @tap.stop="shopDataCheck(shopData)" v-else>{{shopData.shopName}}</div>

							<i class="mui-icon mui-icon-arrowright"></i>
						</div>
						<div v-for="cartItems in shopData.cartItems" style="position: relative;">
							<div class="edit_btn" v-show="edit" @tap="againAlertTap(cartItems)">重选商品规格</div>
							<div class="shop_data" @tap='openDetails(cartItems)'>
								<div class="shop_img"><img src="../../images/noimg.jpg" v-lazy="imgCommonUrl+ cartItems.pic" /></div>
								<div class="shop_text"><span>{{cartItems.prodName}}</span></div>
							</div>
							<div class="collection_data">
								<div class="collection_info" v-for="shopSpec in cartItems.shopSpec">
									<!--编辑选中-->
									<span class="store_check" @tap="minShopEditCheck(shopData,shopSpec)" :class="{'check':shopSpec.edit==1}" v-if="edit"></span>
									<!--选中-->
									<span class="store_check" @tap="minShopCheck(shopData,shopSpec)" :class="{'check':shopSpec.checkSts==1}" v-else></span>
									<div style="text-align: left;" @tap="minShopEditCheck(shopData,shopSpec)" v-if="edit">{{shopSpec.cnProperties}}</div>
									<div style="text-align: left;" @tap="minShopCheck(shopData,shopSpec)" v-else>{{shopSpec.cnProperties}}</div>
									<div class="money">
										<div><span>￥</span><span v-text="shopSpec.promotionPrice=='' || shopSpec.promotionPrice== 0 ? shopSpec.price :shopSpec.promotionPrice"></span></div>
									</div>
									<div class="collection_num">
										<button type="button" class="mui-btn" @tap="reduce(shopSpec,cartItems)">-</button>
										<input type="tel" v-model="shopSpec.basketCount" @input="reduceShopNum(shopSpec,cartItems)" />
										<button type="button" class="mui-btn" @tap="add(shopSpec,cartItems)">+</button>
									</div>
								</div>

							</div>
						</div>

					</div>

				</div>
				<!--购物车为空的状态-->
				<!--<div>
					<div class="noshop">
						<div class="noshop_img"><img src="../../images/no_shop.png" /></div>
						<div class="noshop_text">购物车还是空的</div>
						<div class="noshop_button"><button type="button" class="mui-btn mui-btn-danger">去逛逛</button></div>
					</div>
					<div class="guess">
						<div class="guess_title">
							<div></div>
							<span>猜你喜欢</span>
							<div></div>
						</div>
						<div>
							<div class="advert_five_list">
								<div class="advert_five_border">
									<div class="advert_five_img">
										<img src="../../images/network/046909e7-9a98-444c-b3c3-58cbf73b2caa.png">
									</div>
									<div class="advert_five_msg">
										<div>超市购物拉篮</div>
										<div>品质生活 舒适购物</div>
										<div class="advert_five_sum">
											￥69
										</div>
									</div>
								</div>
							</div>
							<div class="advert_five_list">
								<div class="advert_five_border">
									<div class="advert_five_img">
										<img src="../../images/network/046909e7-9a98-444c-b3c3-58cbf73b2caa.png">
									</div>
									<div class="advert_five_msg">
										<div>超市购物拉篮</div>
										<div>品质生活 舒适购物</div>
										<div class="advert_five_sum">
											￥69
										</div>
									</div>
								</div>
							</div>
							<div class="advert_five_list">
								<div class="advert_five_border">
									<div class="advert_five_img">
										<img src="../../images/network/046909e7-9a98-444c-b3c3-58cbf73b2caa.png">
									</div>
									<div class="advert_five_msg">
										<div>超市购物拉篮</div>
										<div>品质生活 舒适购物</div>
										<div class="advert_five_sum">
											￥69
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>-->

				<div>
					<div class="noshop"  v-show="shopData.length<=0 && loveShop.length>0">
						<div class="noshop_img"><img src="../../images/no_shop.png" /></div>
						<div class="noshop_text">购物车还是空的</div>
						<div class="noshop_button" @tap="goShoping"><button type="button" class="mui-btn mui-btn-danger">去逛逛</button></div>
					</div>
					<div class="guess" v-show="loveShop.length>0">
						<div class="guess_title">
							<div></div>
							<span>猜你喜欢</span>
							<div></div>
						</div>
						<div>
							<div class="advert_five_list" v-for="loveShop in loveShop" @tap.stop="openDetails(loveShop)">
								<div class="advert_five_border">
									<div class="advert_five_img" :style="{background: 'url('+ imgCommonUrl+loveShop.pic+ ')no-repeat center',backgroundSize:'100%'}"></div>
									<div class="advert_five_msg">
										<!--<div>超市购物拉篮</div>
										<div>品质生活 舒适购物</div>-->
										<div>
											{{loveShop.name}}
										</div>
										<div class="size" style="color: #999;">{{loveShop.brief}}</div>
										<div class="advert_five_sum">
											￥{{loveShop.cash}}
											<div class="add_shop" @tap.stop="addShopCar(loveShop)"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<!--结算-->
			<div class="shop_footer" v-if="!edit" v-show="shopData.length>0">
				<div class="footer_left" @tap="selectCheck">
					<div class="store_check" :class="{'check':selects==1}"></div>
					<div>全选</div>
				</div>
				<div class="footer_right">
					<div class="total">
						合计：
						<div><span>￥</span>{{total}}</div>
					</div>
					<div class="footer_button">
						<button type="button" class="mui-btn mui-btn-danger" @tap="goSettlement">去结算</button>
					</div>
				</div>
			</div>
			<!--编辑全选-->
			<div class="shop_footer" v-else>
				<div class="footer_left" @tap="selectEditCheck">
					<div class="store_check" :class="{'check':selectsedit==1}"></div>
					<div>全选</div>
				</div>
				<div class="footer_right">
					<div class="footer_button">
						<button type="button" class="mui-btn mui-btn-danger" @tap="removeShop">删除</button>
					</div>
				</div>
			</div>

			<!--弹框-->
			<!--md_show显示-->
			<div id="editors" :class="{md_show:againAlert && shopDataAlert}">
				<div class="md_content">
					<div class="collection_close">
						<div @tap="closeAgainAlertTap">
							<img src="../../images/close.png" />
						</div>
					</div>
					<div class="collection_head">
						<div class="collection_img"><img src="../../images/noimg.jpg" v-lazy="imgCommonUrl+ shopDataAlert.pic" /></div>
						<div class="collection_introduce">
							<div class="collection_title">{{shopDataAlert.name}}</div>
						</div>
					</div>
					<div class="collection_data">
						<div class="collection_info">
							<div>规格</div>
							<div>单价</div>
							<div>数量</div>
						</div>
						<div class="collection_info" v-for="shopDataAlert in shopDataAlert.skuDtoList">
							<div>{{shopDataAlert.cn_properties}}</div>
							<div class="money">
								<div><span>￥</span>{{shopDataAlert.cash}}</div>
							</div>
							<div class="collection_nums">
								<button type="button" class="mui-btn" @tap="reduceShop(shopDataAlert)">-</button>
								<input type="tel" v-model="shopDataAlert.num" @input="inputNum(shopDataAlert)"/>
								<button type="button" class="mui-btn" @tap="addShop(shopDataAlert)">+</button>
							</div>
						</div>

					</div>
					<div class="editors_confirm">
						<button type="button" class="mui-btn mui-btn-danger" @tap="addShopBuy">确认</button>
					</div>
				</div>
			</div>
			<div class="mui-backdrop"></div>
			<div class="mui-backdrop" style="display: block;opacity:1" v-show="backdrop"></div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/home/shopping.js"></script>
	</body>

</html>